<template>
	<div class="header">
		<!-- 左侧返回 -->
		<div class="header-button is-left" v-show="isLeft">
			<i class="fa fa-chevron-left"></i>
			<button @click="$router.push('/home')">返回首页</button>
		</div>
		<!-- 中间标题 -->
		<h1 class="header-title">{{title}}</h1>
	</div>
</template>

<script>
	export default{
		props:{
			title:String,
			isLeft:{
				type:Boolean,
				default:false
			}
		}
	}
</script>

<style scoped="scoped">
	.header {
	  align-items: center;
	  background-color: #009eef;
	  box-sizing: border-box;
	  color: #fff;
	  display: flex;
	  font-size: 16px;
	  height: 45px;
	  line-height: 1;
	  padding: 0 10px;
	  position: relative;
	  text-align: center;
	  white-space: nowrap;
	  position: fixed;
	  width: 100%;
	  top: 0;
	  z-index: 99;
	}
	
	.header-button button {
	  background-color: transparent;
	  border: 0;
	  box-shadow: none;
	  color: inherit;
	  display: inline-block;
	  padding: 0;
	  font-size: inherit;
	  outline: none;
		margin-left: 8px;
	}
	.header-title {
	  /* flex: 1; */
		display: inline-block;
		width: 100px;
		height: 20px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
	}
	.is-left {
	  text-align: left;
	}

</style>
